﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" class="loginHtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; Charset=utf-8" />
		<meta http-equiv="Content-Language" content="zh-CN" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
		<title text="博客文章专栏'"></title>
		<link rel="shortcut icon" href="images/logo.png" type="image/x-icon" />
		<!--Layui-->
		<link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
		<!--font-awesome-->
		<link th:href="@{/font-awesome/css/font-awesome.min.css}" rel="stylesheet" />
		<!--全局样式表-->
		<link th:href="@{/css/global.css}" rel="stylesheet" />
		<link th:href="@{/css/animate.min.css}" rel="stylesheet" />
		<!-- 本页样式表 -->
		<link th:href="@{/css/detail.css}" rel="stylesheet"/>
		<link th:href="@{/css/blog.css}" rel="stylesheet" />
		<link th:href="@{/css/me.css}" rel="stylesheet" />
		<link rel="stylesheet" th:href="@{/css/master.css}" />
		<link rel="stylesheet" th:href="@{/css/gloable.css}" />
		<link rel="stylesheet" th:href="@{/css/nprogress.css}" />
		<link rel="stylesheet" th:href="@{/css/message.css}" />
		<!-- jquery -->
		<script th:src="@{/js/jquery.min.js}"></script>
	</head>

	<body>

	<div th:insert="~{commons/commons.html :: top}"></div>

		<div class="blog-body">

			<div class="blog-container">
				<div class="blog-main">
					<blockquote class="layui-elem-quote sitemap layui-breadcrumb shadow" style="visibility: visible;">
						<a href="userIndex.html" title="网站首页">网站首页<span class="layui-box">&gt;</span></a>
						<a href="article.html" title="文章专栏">文章专栏<span class="layui-box">&gt;</span></a>
						<a><cite class="title" th:text="${topic.title}"></cite></a>
					</blockquote>
					<div class="blog-main" style="width: 1775px">

						<div id="parentArticleList" class="blog-main-left animated slideInLeft">

							<div class="article-detail shadow">
								<div class="article-detail-title title" th:text="${topic.title}"></div>
								<div class="article-detail-info">
									<span th:text="${'时间:' + #dates.format(topic.topicTime, 'yyyy-MM-dd')}"></span>
									<span th:text="${'作者:' + topic.user.username}"></span>
									<span th:text="${'浏览量:' + topic.browseCount}"></span>
								</div>
								<button th:onclick="supportTopic()" class="article-viewinfo" style="border-style:none; background-color: white" th:if="${appraiseTopicMap[topic.id] == 1}"><i class="fa fa-thumbs-o-up" id="support"  style="color: deeppink" th:text=" ${topic.getSupportCount()}"></i>&nbsp;&nbsp;</button>
								<button th:onclick="supportTopic()" class="article-viewinfo" style="border-style:none; background-color: white" th:if="${appraiseTopicMap[topic.id] == null || appraiseTopicMap[topic.id] == 0}"><i id="support" class="fa fa-thumbs-o-up"   style="color: cornflowerblue" th:text=" ${topic.getSupportCount()}"></i>&nbsp;&nbsp;</button>
								<div id="articleContent" style="overflow: hidden;" class="article-detail-content">
									<pre style="color: black;" th:text="${topic.content}"></pre>
								</div>
							</div>

							<div class="blog-module shadow" style="box-shadow: 0 1px 8px #a6a6a6;">
								<fieldset class="layui-elem-field layui-field-title" style="margin-bottom:0">
									<legend>来说两句吧</legend>
									<div class="layui-field-box">
										<div class="layui-form blog-editor">
											<input type="hidden" id="commentTopicId" th:value="${topic.id}">
											<div class="layui-form-item">
												<textarea required="required" id="content" name="content" class="layui-textarea" placeholder="请输入内容"></textarea>
											</div>
												<div class="layui-form-item ">
													<button class="layui-btn" th:onclick="submitComment([[${topic.id}]])">提交评论</button>
												</div>
										</div>
									</div>
								</fieldset>
								<div class="blog-module-title ">最新评论</div>
									<!--<ul class="blog-comment " id="commentList"></ul>-->
								<div class="mt20">
									<ul class="message-list" id="message-list">
										<!--遍历放着就行。。。。-->
										<li class="zoomIn article" th:each="comment:${topic.commentList}">
											<!--主回复-->
											<div class="comment-parent">
												<a name="remark-1"></a>
												<img th:src="@{/images/avatar/} + ${comment.author.avatar}" />
												<!--<a th:href="@{/toOtherPersonal/} + ${comment.author.id}"><img th:src="@{/images/avatar/} + ${comment.author.avatar}"></a>-->
												<div class="info">
													<a th:href="@{/toOtherPersonal/} + ${comment.author.id}"><span class="username" th:text="${comment.author.username}"></span><a/>
												</div>
												<div class="comment-content" th:text="${comment.content}"></div>
												<p class="info info-footer">
													<i class="fa fa-map-marker" aria-hidden="true"></i>
													<span class="comment-time" th:text="${#dates.format(comment.commentTime, 'yyyy-MM-dd hh:mm:ss')}"></span>
													<input type="hidden" id="parentId" th:value="${comment.author.id}">
													<button th:onclick="supportComment([[${comment.id}]])" class="article-viewinfo" style="border-style:none; background-color: white" th:if="${appraiseCommentMap[comment.id] == 1}">
														<i class="fa fa-thumbs-o-up"   style="color: deeppink" th:text=" ${comment.getSupportCount()}"></i>&nbsp;&nbsp;
													</button>
													<button th:onclick="supportComment([[${comment.id}]])" class="article-viewinfo" style="border-style:none; background-color: white" th:if="${appraiseCommentMap[comment.id] == null || appraiseCommentMap[comment.id] == 0}">
														<i class="fa fa-thumbs-o-up"   style="color: cornflowerblue" th:text=" ${comment.getSupportCount()}"></i>&nbsp;&nbsp;
													</button>
													<a th:href="@{/reply/} + ${comment.author.id} + '/' + ${topic.id} + '/' + ${comment.floor} + '/' + ${comment.author.username}" class="btn-reply" data-targetid="1" th:data-targetname="${comment.author.username}">回复</a>
													<a style="border-style:none; background-color: white; color: #e61a8d" th:if="${comment.author.id == session?.loginUser?.id}">删除</a>
												</p>
											</div>
											<hr/>
											<!--子回复-->
											<div class="comment-child" th:each="child:${comment.childCommentList}" th:if="${comment.childCommentList != null}">
												<a name="reply-1"></a>
												<img th:src="@{/images/avatar/} + ${child.author.avatar}">
												<div class="info">
													<a th:href="@{/toOtherPersonal/} + ${child.author.id}"><span class="username" th:text="${child.author.username}"></span><a/>
													<span style="padding-right:0;margin-left:-5px;">回复</span>
														<a th:href="@{/toOtherPersonal/} + ${child.replyTo?.id}"><span class="username" th:text="${child.replyTo?.username}"></span><a/>
													<span th:text="${child.content}"></span>
												</div>
												<p class="info">
													<i class="fa fa-map-marker" aria-hidden="true"></i>
													<span class="comment-time" th:text="${#dates.format(child.commentTime, 'yyyy-MM-dd hh:mm:ss')}"></span>
													<input type="hidden" id="childId" th:value="${child.author.id}">
													<button th:onclick="supportComment([[${child.id}]])" class="article-viewinfo" style="border-style:none; background-color: white" th:if="${appraiseCommentMap[child.id] == 1}">
														<i class="fa fa-thumbs-o-up"   style="color: deeppink" th:text=" ${child.getSupportCount()}"></i>&nbsp;&nbsp;
													</button>
													<button th:onclick="supportComment([[${child.id}]])" class="article-viewinfo" style="border-style:none; background-color: white" th:if="${appraiseCommentMap[child.id] == null || appraiseCommentMap[child.id] == 0}">
														<i class="fa fa-thumbs-o-up"   style="color: cornflowerblue" th:text=" ${child.getSupportCount()}"></i>&nbsp;&nbsp;
													</button>
													<a th:href="@{/reply/} + ${child.author.id} + '/' + ${topic.id} + '/' + ${child.floor} + '/' + ${child.author.username}" class="btn-reply2" data-targetid="2" th:data-targetname="${child.author.username}">回复</a>
													<input type="hidden" id="replyId" th:value="${child.author.id}">
												</p>
											</div>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
					<div class="clear "></div>
				</div>
			</div>
		</div>
	<!--页脚-->
	<div th:insert="~{commons/commons.html :: down}"></div>
		<div class="blog-share layui-hide ">
			<div class="blog-share-body ">
			</div>
		</div>
		</div>
		<div class="blog-mask animated layui-hide "></div>
		<script th:src="@{/layui/layui.js}"></script>
		<script th:src="@{/js/global.js}"></script>
		<script th:src="@{/js/about.js}"></script>
		<script th:src="@{/js/detail.js}"></script>
		<script th:src="@{/js/pagemessage.js}"></script>

		<script th:inline="javascript">
			function supportTopic(){
				let message = [[${topic.id}]]
				let count = [[${topic.getSupportCount()}]]
				let flag = [[${appraiseTopicMap[topic.id]}]]
				$.get({
					url: "/chen/topic/supportOrCriticism/" + message,
					success: function (data){
						if (data === "error"){
							layer.msg("请先登录！")
						} else {
							if (flag === 1){
								if (data >= count){
									$("#support").css("color", "deeppink");
									$("#support").html(data);
								} else {
									$("#support").css("color", "cornflowerblue");
									$("#support").html(data);
								}
							}else {
								if (data > count){
									$("#support").css("color", "deeppink");
									$("#support").html(data);
								} else {
									$("#support").css("color", "cornflowerblue");
									$("#support").html(data);
								}
							}
						}
					},
					error: function (){
						alert("失败")
					}
				})
			}

			function supportComment(commentId){
				$.get({
					url: "/chen/comment/supportOrCriticism/" + [[${topic.id}]] + '/' + commentId,
					success: function (data){
						if (data === "error"){
							layer.msg("请先登录！")
						} else {
							location.href = "/chen/detail/" + [[${topic.id}]];
						}
					},
					error: function (){
						alert("失败")
					}
				})
			}

			function submitComment(x){
				$.ajax({
					method: "get",
					url: "/chen/submitComment/" + x,
					data: {
						"content":$("#content").val(),
						"commentTopicId":$("#commentTopicId").val(),
					},
					success:function (data) {
						layer.msg(data)
					},
					error:function (data){
						layer.msg(data)
					}
				})
			}

			$(function (){
				var x = [[${message}]];
				if(x != null){
					layer.msg(x)
				}
			})

			window.onbeforeunload = function () {
				var scrollPos;
				if (typeof window.pageYOffset != 'undefined') {
					scrollPos = window.pageYOffset;
				}
				else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
					scrollPos = document.documentElement.scrollTop;
				}
				else if (typeof document.body != 'undefined') {
					scrollPos = document.body.scrollTop;
				}
				document.cookie = "scrollTop=" + scrollPos; //存储滚动条位置到cookies中
			}

			window.onload = function () {
				if (document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null) {
					var arr = document.cookie.match(/scrollTop=([^;]+)(;|$)/); //cookies中不为空，则读取滚动条位置
					document.documentElement.scrollTop = parseInt(arr[1]);
					document.body.scrollTop = parseInt(arr[1]);
				}
			}

		</script>
	</body>
</html>